<template>
    <div>
        <div class="progress-bar-wrap">
            
            <div class="time time-progress">{{currentTime}}</div>
            <div
                class="progress-bar"
                ref="progress"
                @touchstart="touchstart"
                @touchmove="touchmove"
                @touchend="touchend"
            >
                <div class="background"></div>
                <div class="progress" v-bind:style="{ width: progress + 'px' }"></div>
                <i class="icon" v-bind:style="{ left: progress + 'px' }"></i>
            </div>
            <div class="time duration">{{duration}}</div>
        </div>
        <!-- audio -->
        <audio src="@/assets/demo.mp3" ref="audio" @loadedmetadata="Ready" @ended='end'></audio>
        <!-- audio -->
        <div class="control">
            <div class="item">
                <i class="iconfont icon-liebiaoxunhuan"></i>
            </div>
            <div class="item">
                <i class="iconfont icon-shangyishou"></i>
            </div>
            <div class="item" @click="Start()">
                <i class="iconfont icon-bofang" :class="{red:palyStatus}"></i>
            </div>
            <div class="item">
                <i class="iconfont icon-xiayishou-copy"></i>
            </div>
            <div class="item">
                <i class="iconfont icon-caidan"></i>
            </div>
        </div>
    </div>
</template>

<script>
import { Slider } from 'element-ui';
export default {
    name: "control",
    data() {
        return {
            palyStatus: false,
            progress: "0",
            duration_data: "", //总时长原始值
            currentTime_data: "", //当前播放时间原始值
            progress_width: "", //进度条总宽度
            setTimeout: ""
        };
    },
    watch: {
        currentTime_data: function(val) {
            this.progress = (val * this.progress_width) / this.duration_data;
        },
        progress: function(val) {
            this.currentTime_data = (this.duration_data * val) / this.progress_width;
        }
    },
    computed: {
        //当前播放时间
        currentTime() {
            if (this.currentTime_data !== "") {
                return this.get_M_S(this.currentTime_data);
            } else {
                return "0:00";
            }
        },
        //总时长
        duration() {
            return this.get_M_S(this.duration_data);
        },
        dom_p() {
            return this.getElementPosition(this.$refs.progress);
        }
    },
    mounted() {
        this.progress_width = this.$refs.progress.clientWidth;
    },
    methods: {
        // 播放按钮
        Start() {
            this.palyStatus === false ? this.play() : this.pause();
        },
        // 播放
        play() {
            this.palyStatus = true;
            this.$refs.audio.play();
            this.getCurrentTimeLoop();
        },
        // 暂停
        pause() {
            this.palyStatus = false;
            this.$refs.audio.pause();
            clearInterval(this.setTimeout);
        },
        // 结束
        end(){
            clearInterval(this.setTimeout);
            this.palyStatus = false;
            this.Ready();
        },
        // 歌曲信息初始化
        Ready() {
            this.duration_data = this.$refs.audio.duration;
            this.progress = 0;
            this.currentTime_data = 0
        },
        // 播放时循环更新播放时间
        getCurrentTimeLoop() {
            this.setTimeout = setInterval(() => {
                this.currentTime_data = this.$refs.audio.currentTime;               
            }, 1000);
        },
        // 转换时间格式
        get_M_S(e) {
            var m;
            var s;
            m = Math.floor(e / 60);
            s = Math.floor(e % 60);
            if (s < 10) {
                s = "0" + s;
            }
            return m + ":" + s;
        },
        // 进度条 触碰时调用
        touchstart(evt) {
            this.touch_data(evt);
            clearInterval(this.setTimeout);
        },
        // 进度条 滑动时调用
        touchmove(evt) {
            this.touch_data(evt);
            clearInterval(this.setTimeout);
        },
        // 进度条 消失的触摸点时调用
        touchend(evt) {
            this.touch_data(evt);
            this.JumpTime();
            if (this.palyStatus === true) {
                this.getCurrentTimeLoop();
            }
        },
        // 进度条 计算长度
        touch_data(evt) {
            evt.preventDefault();
            var touches = evt.changedTouches;
            var nuber = touches[0].pageX - this.dom_p;
            if (nuber >= this.progress_width) {
                nuber = this.progress_width;
            } else if (nuber <= 0) {
                nuber = 0;
            }
            this.progress = nuber;
        },
        // 进度条 跳转播放位置
        JumpTime() {
            var nuber =
                (this.duration_data * this.progress) / this.progress_width;
            this.$refs.audio.currentTime = nuber;
        },
        // 获得元素距离文档左侧距离
        getElementPosition(e) {
            var x = 0;
            while (e !== null) {
                x += e.offsetLeft;
                e = e.offsetParent;
            }
            return x;
        }
    }
};
</script>


<style lang="less" scoped>
.control {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.control .iconfont {
    font-size: 35px;
}
.red {
    color: #d44439;
}
.progress-bar-wrap {
    margin-bottom: 20px;
    position: relative;
    .time {
        position: absolute;
        top: 0;
        font-size: 12px;
    }
    .time-progress {
        left: 0;
    }
    .duration {
        right: 0;
    }
    .progress-bar {
        position: relative;
        margin: 0 35px;
        padding: 5px 0;
        .background {
            background: #e4e2e2;
            opacity: 0.6;
            height: 5px;
        }
        .progress {
            position: absolute;
            top: 5px;
            left: 0;
            height: 5px;
            background: #d44439;
        }
        .icon {
            position: absolute;
            top: 0;
            left: 0;
            height: 15px;
            width: 15px;
            background: #d6c6c4;
            border-radius: 50%;
            transform: translateX(-7px);
        }
    }
}
</style>
